/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
  Toolbar,
  useTheme,
  Button,
  Container, IconCloud, InputLine, Input,
} from "customize-easy-ui-component";
import food from "../images/food.svg";
import { Layout } from "./Layout";
import { Link as RouterLink } from "../routing/Link";
import {usePreloadedQuery, useQueryLoader} from "react-relay/hooks";
import {ReportGuideQuery$data} from "./__generated__/ReportGuideQuery.graphql";
import {AloneContainer} from "../comp/AloneContainer";

const graphql = require("babel-plugin-relay/macro");
const ReportGuideQuery = require('./__generated__/ReportGuideQuery.graphql');

interface Props {
  prepared: {
  }
}

export default function ReportGuideWrapper(props: Props) {
  //第二个返回值loadQuery是回调(variables: VariablesOf<TQuery>, options?: UseQueryLoaderLoadQueryOptions) => void
  //第二个参数的类型必须完全一致！useQueryLoader与usePreloadedQuery保持一致类型？？
    //后端searchIsp ，点击才能触发查询模式。loadQuery =发送后端查询命令。
  const [queryReference, loadQuery] = useQueryLoader(
      ReportGuideQuery  //GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
      //PreloadedQuery<TQuery> | null,  provided by router
  );
  //第二个参数的： props.prepared.issuesQuery,
  //props.prepared父辈的已经做查询传递，还没给参数呢
  console.log("Test 目前render之后.New=",queryReference,"Old.parent=",props.prepared);
  //引入Relay思路大变：没有数据就没有页面展示，若需默认展示就必须提供缺省参数来准备好数据后才能执行页面显示代码。
    const theme = useTheme();
    //useState(默认值) ； 后面参数值仅仅在组件的装载时期有起作用，若再次路由RouterLink进入的，它不会依照该新默认值去修改show。useRef跳出Cpature Value带来的限制
    //采用RouterLink页内路由进入useState还保留旧的值，要修改就将会导致render两次；旧的值新的值各一次渲染。若采用URL刷新模式只有一次。
    //const [show, setShow] = React.useState(false);
    const [repId, setRepId] = React.useState('');
    const [repNo, setRepNo] = React.useState('');
    let filtercomp={ id:repId };

    //复检数据拷贝初检后再度修订的。最初的初检数据原封不动。复检rexm，正检data，结论及审核改定deduction｛也可部分照搬复检rexm正检data或映射转译｝。
    //原始记录录入模式复检正检，［正式报告来源项］只读的预览结论模式{动态生成结论}，(完毕提交)；
    //１原始记录　组件：不可改的不保存的［推断］结论项。　　　内容细化描述；复检正检数据切换的；结论项提示性质；　－－给检验操作人员录入。
    //２审核组件：回退或者往前固化结论项后保存给正式报告页面。　项目文本简化，数据需要保存给后端；－－正式报告手机可预览版，无下拉分区，不能编辑，－－核准管理人员审批。
    //３正式报告那个目录的打印页面。只读的，结论项也是读后端的；正式报告文书版本或可转保存其他如pdf类型文档，无下拉分区，全展示；－－大众用户查看。
    //审核但是不能修改检验数据模式，回退编制复检？或后台修正；校对转正式报告数据倒腾和推断合并结论项目，另外保存成了deduction，对表正式报告，报告排版美化。
    const [inp, setInp] = React.useState(null);

    //用<form >会影响到布局的，form也要css={}?。

    return (
       <AloneContainer>

         <div css={{
            margin: 'auto',
            background: "white"
         }}
         >
            <form  method="post"
                   onSubmit={e =>{
                       e.preventDefault();  //阻止默认post://URL?
                       loadQuery({
                          id: repNo,
                          iwhere: {no: repNo}
                   }) } }>

                <Text  variant="h5"　css={{ textAlign: 'center' }}>
                    <span>从ES引擎搜索检验报告</span>
                </Text>
                <InputLine  label='用报告编号查' >
                    <Input  value={repNo}  placeholder="那一份报告？"
                            onChange={e => setRepNo(e.currentTarget.value) } />
                </InputLine>
                <Button type="submit">搜索看有没有</Button>
                <React.Suspense fallback="等下马上来...">
                    { queryReference && <ReportGuide queryReference={queryReference} /> }
                </React.Suspense>

            </form>
         </div>
            <hr/>
            <Text variant="h5" css={{ textAlign: 'center' }}>
                业务端客户可以无密码登录进入浏览报告，但是必须提供本系统签发的token来验明真身，token三个月有效期，过期想看报告需申请。
            </Text>

      </AloneContainer>
  );
}

interface ReportGuideProps {
  queryReference: any;
}
//从服务端取得的每个实体模型id都不允许相等的！Relay报错; $globalId = base64("$ObjectName:$ObjectPK").
function ReportGuide({ queryReference }:ReportGuideProps)
{
    //不能改为servu{id name company{name} person{name}}后端搜索IspES实际提供的company{person{没有ID字段的。会报错!
  const data =usePreloadedQuery<typeof ReportGuideQuery>(
      graphql`
          query ReportGuideQuery(
              $after:String,$first:Int=10,$orderBy:String,$asc:Boolean=true,
              $iwhere:IspCommonInput
          ) {
              searchIsp(where: $iwhere,after:$after,first:$first,orderBy:$orderBy,asc:$asc)
              @connection(key: "Query_searchIsp") {
                  edges {
                      node {
                          id,no,bsType,entrust,ispDate,dev{id,oid,cod},bus{id task{id,date}}
                          servu{id name},ispu{id}
                      }
                  }
              }
          }
      `,
      queryReference,
  );
  //有必要？做个 ES搜索引擎 索引，就是给no报告号的搜索加速？？
    const { searchIsp: list }=data as ReportGuideQuery$data;
     const isps = list && list.edges ? list.edges.map(edge => edge?.node) : [];
     const isp =isps && isps[0] ;

  //  const { getReport: items }= (false)?  data! : {getReport:null};
  const theme = useTheme();
  //useState(默认值) ； 后面参数值仅仅在组件的装载时期有起作用，若再次路由RouterLink进入的，它不会依照该新默认值去修改show。useRef跳出Cpature Value带来的限制
  //采用RouterLink页内路由进入useState还保留旧的值，要修改就将会导致render两次；旧的值新的值各一次渲染。若采用URL刷新模式只有一次。
  //const [show, setShow] = React.useState(false);
  const [repId, setRepId] = React.useState('');
  const [repNo, setRepNo] = React.useState('');
  let filtercomp={ id:repId };

  //复检数据拷贝初检后再度修订的。最初的初检数据原封不动。复检rexm，正检data，结论及审核改定deduction｛也可部分照搬复检rexm正检data或映射转译｝。
  //原始记录录入模式复检正检，［正式报告来源项］只读的预览结论模式{动态生成结论}，(完毕提交)；
  //１原始记录　组件：不可改的不保存的［推断］结论项。　　　内容细化描述；复检正检数据切换的；结论项提示性质；　－－给检验操作人员录入。
  //２审核组件：回退或者往前固化结论项后保存给正式报告页面。　项目文本简化，数据需要保存给后端；－－正式报告手机可预览版，无下拉分区，不能编辑，－－核准管理人员审批。
  //３正式报告那个目录的打印页面。只读的，结论项也是读后端的；正式报告文书版本或可转保存其他如pdf类型文档，无下拉分区，全展示；－－大众用户查看。
  //审核但是不能修改检验数据模式，回退编制复检？或后台修正；校对转正式报告数据倒腾和推断合并结论项目，另外保存成了deduction，对表正式报告，报告排版美化。

    // const [inp, setInp] = React.useState(null);
  //外部dat不能加到依赖，变成死循环! const  dat =items&&items.data&&JSON.parse(items.data);  这dat每次render都变了？
  //从后端返回的数据可能items已经被修改了
  // React.useEffect(() => {
  //   const  dat =rep&&rep.data&&JSON.parse(rep.data);
  //    dat && setInp(dat);
  // }, [rep]);
  console.log("祖父guaid捕获 isp=", isp );

  return (
          <div css={{
              margin: 'auto',
              background: "white"
            }}
          >
              {isp?.id?
                  <React.Fragment>
                      <InputLine  label='报告ID{将来是从链接地址自动获得}' >
                          <Input  value={repId}  placeholder="那一份报告？将来是点击链接自动获得"
                                  onChange={e => setRepId(e.currentTarget.value) } />
                      </InputLine>
                      <InputLine  label='本系统签发token{将来是从链接地址自动获得}' >
                          <Input  value={''}  placeholder="三月有效；登录用户无需token"
                                  onChange={e => void 0 } />
                      </InputLine>
                      <RouterLink href={`/search/isp/${isp?.id}`}>
                          <Button
                              size="lg" noBind
                              intent="primary"
                              variant="ghost"
                              iconAfter={<IconCloud />}
                          >
                           想看该份报告(入口)
                          </Button>
                      </RouterLink>
                  </React.Fragment>
                  :
                  <Text variant="h5" css={{ textAlign: 'center' }}>
                      没找到此号码
                  </Text>
              }
          </div>
  );
}

